<template>
	<view :class="['task-list',theme]" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @tap="pageTap">
		<view class="funcs-header" :style="{alignItems:showSearch?'center':'flex-start'}">
			<uni-icons fontFamily="iconfont" @click="goBack" :size="30" color="#fff">{{'\ue64f'}}</uni-icons>
			<input v-model="keywords" auto-focus placeholder="搜索" class="similar-search" v-if="showSearch" />
			<view class="list-group-info" v-else>
				<view class="group-title">{{titleMap[groupBy]}}</view>
				<view class="date-info">{{dayInfo}}</view>
			</view>
			<view class="search-switch">
				<view v-if="showSearch" @tap="closeSearch">取消</view>
				<uni-icons v-else fontFamily="iconfont" @tap="showSearch=true" :size="26" color="#fff">{{'\ue6b5'}}</uni-icons>
			</view>

			<popup-menu :tapRefers="tapRefers" :menus="menuOptions" @select="selectOperates">
				<uni-icons fontFamily="iconfont" :size="30" color="#fff">{{'\ue600'}}</uni-icons>
			</popup-menu>
		</view>
		<scroll-view scroll-y="true" class="scroll-view">
			<view class="doing-list">
				<card :cardInfo="item" @open-detail="openDetail(item)" :groupBy="groupBy" @refresh="requestTasks" class="card-item" v-for="item in doingList" :key="item.taskId">
				</card>
			</view>
			<span class="done-swtich" @click="switchHandle" v-if="doneList.length">
				<uni-icons type="down" color="#fff" size="16" v-if="showDoneList"></uni-icons>
				<uni-icons type="right" color="#fff" size="16" v-else></uni-icons>
				<text>已完成</text>

				<text>{{doneList.length}}</text>
			</span>
			<view class="done-list" v-show="doneList.length&&showDoneList">
				<card :cardInfo="item" @open-detail="openDetail(item)" :groupBy="groupBy" @refresh="requestTasks" class="card-item" v-for="item in doneList" :key="item.taskId">
				</card>
			</view>

		</scroll-view>
		<view class="new-task-btn" v-if="groupBy==='myday'" @tap="$refs.addTask.open()">
			<uni-icons fontFamily="iconfont" :size="30" color="var(--theme-color)">{{'\ue727'}}</uni-icons>
		</view>
		<uni-popup ref="themeSetting" type="bottom">
			<themeSetting @close="closeThemeSetting" />
		</uni-popup>
		<uni-popup ref="sortSetting" type="bottom">
			<bottomMenu :menus="sortOptions" tip-txt="排序依据" @select="closeSortSetting" />
		</uni-popup>
		<uni-popup ref="addTask" type="bottom">
			<addTask @close="$refs.addTask.close()" />
		</uni-popup>
		<qiunLoading :loadingType="4" v-if="loading" class="loading-task-list" />


	</view>
</template>

<script>
	import dayjs from 'dayjs';
	import 'dayjs/locale/zh-cn';
	import card from "./components/task-card.vue";
	import popupMenu from '@/components/popup-menu/popup-menu.vue'
	import themeSetting from './components/theme-setting.vue';
	import bottomMenu from '@/components/bottom-menu/bottom-menu.vue';
	import addTask from './components/addTask.vue';
	import { getTaskGroup } from '@/utils/taskList';
	import { mapActions, mapState, mapMutations } from 'vuex';
	import qiunLoading from '../../components/qiun-loading/qiun-loading.vue';
	



	import taskRefresh from '@/mixins/taskRefresh.js';


	dayjs.locale('zh-cn')
	export default {
		components: {
			card,
			popupMenu,
			themeSetting,
			bottomMenu,
			addTask,
			qiunLoading,
		},
		mixins: [taskRefresh],
		data() {
			return {
				showSearch: false,
				keywords: "",
				showDoneList: true,
				titleMap: {
					"myday": "我的一天",
					"assign": "已分配任务",
					"tome": "已分配给我"
				},
				dayInfo: dayjs().format('M月D日 dddd'),
				groupBy: "",
				tapRefers: {}, // 里边的事件会在每次页面tap时触发
				list: [],
				userId: 14,
				menuOptions: [{
						icon: "\ue60d",
						title: "排序依据",
						value: 1
					},
					{
						icon: "\ueaed",
						title: "主题",
						value: 2
					},
				],
				sortOptions: [{
						icon: "\ue624",
						title: "重要性",
						value: 1,
						type: 'flag'
					},
					{
						icon: "\ue7d5",
						title: "到期时间",
						value: 2,
						type: 'deadTime'
					},
					{
						icon: "\ue737",
						title: "创建日期",
						value: 3,
						type: 'createTime'
					}
				],
				sortByFunctions: {
					flag: (a, b) => b.flag - a.flag,
					createTime: (a, b) => dayjs(a.createDateTime).valueOf() - dayjs(b.createDateTime).valueOf(),
					deadTime: (a, b) => dayjs(a.deadTime).valueOf() - dayjs(b.deadTime).valueOf()
				},
			}
		},
		watch: {
			taskList: {
				handler(newV, oldV) {
					this.refeshList()
				},
				deep: true
			}
		},
		computed: {
			...mapState('taskStore', ['theme', 'taskList', 'sortBy', 'online']),
			doingList() {
				return this.list.filter(item => item.finishStatus === 0&&(item.taskContent?.includes(this.keywords)||!this.keywords)).sort(this.sortByFunctions[this.sortBy])
			},
			doneList() {
				return this.list.filter(item => item.finishStatus === 1&&(item.taskContent?.includes(this.keywords)||!this.keywords)).sort(this.sortByFunctions[this.sortBy])
			}
		},
		methods: {
			...mapActions('taskStore', ['requestTasks']),
			...mapMutations('taskStore', ['setSortBy']),
			goBack: uni.navigateBack,
			refeshList() {
				this.list = this.taskList.filter(item => getTaskGroup(item) === this.groupBy)
			},
			switchHandle() {
				this.showDoneList = !this.showDoneList
			},
			openDetail({ taskId }) {

				uni.navigateTo({
					url: `/pages/task-detail/task-detail?taskId=${taskId}&groupBy=${this.groupBy}`
				});
			},
			selectOperates(options) {
				const { value } = options

				if (value === 1) {
					this.$refs.sortSetting.open("bottom")
				} else if (value === 2) {
					this.$refs.themeSetting.open("bottom")
				}
			},
			closeThemeSetting(...args) {
				this.$refs.themeSetting.close()
			},
			closeSortSetting({ type }) {
				this.setSortBy(type)
				this.$refs.sortSetting.close()
			},
			pageTap() {
				Object.values(this.tapRefers).forEach(event => {
					event()
				})
			},
			closeSearch() {
				this.keywords = ""
				this.showSearch = false

			}
		},
		onLoad(options) {
			this.groupBy = options.groupBy
			this.refeshList()
			// 详情页面 提升为任务 当前页可能不是我的一天分组
			uni.$on('update:task-list', ({ groupBy }) => {
				if (this.groupBy !== groupBy) {
					this.groupBy = groupBy
					this.refeshList()
				}
			});

		},
		onShow() {
			this.requestTasks()
		},
		onUnload() {
			uni.$off('update:task-list')
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.task-list {
		background: var(--theme-bg);
		padding: 12px 8px;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		height: 100vh;
		width: 100vw;
		background-position: center center;
		display : flex;
		flex-direction: column;
		.scroll-view{
			flex: 1;
			overflow: hidden;
			padding-bottom: 24upx;
			box-sizing: border-box;
		}
	}


	.funcs-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 12px 0px;
		margin-bottom: 12upx;
		box-sizing: border-box;
		min-height: 72upx;

		.list-group-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: #FFF;
			padding-left: 12px;

			.group-title {
				font-size: 36upx;
				font-weight: bold;
				margin-bottom: 4px;
			}
		}

		.similar-search {
			background-color: #fff;
			height: 72upx;
			border-radius: 36upx;
			flex: 1;
			margin: 0 48upx;
			/deep/ .uni-input-placeholder{
				font-size: 30upx;
				color: #ccc;
				padding-left: 36upx;
			}
			/deep/ .uni-input-input{
				
				color: #333;
				padding-left: 36upx;
			}
		}

		.search-switch {
			height: 100%;
			color: #fff;
			margin: 4upx 48upx 0 0;
		}
	}

	.doing-list,
	.done-list {
		.card-item:not(:first-child) {
			margin-top: 4px;
		}
	}

	.done-swtich {
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		margin: 8px 0;
		padding: 4px 8px 4px 0;
		width: max-content;
		color: #fff;
		border-radius: 4px;

		text {
			margin-left: 8px;
		}
	}

	.new-task-btn {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 72px;
		right: 24px;
		background-color: #fff;
		border-radius: 50%;

	}
</style>